<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Fluenty Survey</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      }
      body {
        background-color: #f0f3f8;
        color: #0f4c81;
        display: flex;
        min-height: 100vh;
        flex-direction: column;
        max-width: 600px;
        margin: 0 auto;
      }
      .container {
        padding: 40px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        justify-content: flex-start;
      }

      /* Progress circle styles */
      .progress-container {
        position: relative;
        margin-bottom: 50px;
      }
      .progress-ring {
        width: 200px;
        height: 200px;
        position: relative;
      }
      .progress-circle {
        transform: rotate(-90deg);
      }
      .progress-circle-bg {
        stroke: #e6e6e6;
        stroke-width: 6px;
      }
      .progress-circle-value {
        stroke: #4991ef;
        stroke-width: 6px;
        stroke-linecap: round;
        transition: stroke-dashoffset 0.5s ease;
      }
      .profile-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 170px;
        height: 170px;
        border-radius: 50%;
        overflow: hidden;
        background-color: #243b76;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
        border: 6px solid white;
      }
      .profile-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .progress-text {
        position: absolute;
        bottom: -50px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 32px;
        font-weight: 700;
        color: #4991ef;
      }

      /* Title and Loading Section */
      .title {
        font-size: 32px;
        font-weight: 700;
        color: #0B4983;
        margin-bottom: 50px;
        text-align: center;
      }
      .loading-section {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 30px;
      }
      .loading-item {
        display: flex;
        align-items: center;
        gap: 16px;
      }
      .loading-icon {
        font-size: 28px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .loading-details {
        flex: 1;
        font-size: 20px;
        font-weight: 600;
        color: #333;
      }
      .completed-status {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 500;
        color: #4991ef;
      }
      .check-icon {
        background-color: #4991ef;
        color: white;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
      }

      /* Dialog styles */
      .overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100;
      }

      .dialog-section {
        background: white;
        border-radius: 24px;
        max-width: 480px;
        width: 90%;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        z-index: 101;
      }

      .dialog-header {
        text-align: center;
        padding: 30px 30px 20px;
      }

      .dialog-subtitle {
        text-transform: uppercase;
        color: #777;
        font-size: 14px;
        letter-spacing: 1px;
        margin-bottom: 16px;
      }

      .dialog-title {
        color: #0B4983;
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 20px;
        line-height: 1.3;
        text-align: center;
      }

      .option-buttons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 6px;
        padding: 5px 20px 30px;
      }

      .option-button {
        padding: 24px 24px;
        border: 1px solid #eaeaea;
        border-radius: 16px;
        background-color: white;
        font-size: 18px;
        color: #333;
        cursor: pointer;
        text-align: center;
        min-width: 120px;
        transition: all 0.2s ease;
      }

      .option-button:hover {
        background-color: #f5f8ff;
        border-color: #4991ef;
        color: #4991ef;
      }

      /* Bottom dialog styles */
      .bottom-dialog {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-radius: 24px 24px 0 0;
        padding: 30px 20px;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
        z-index: 101;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        max-width: 600px;
        margin: 0 auto;
      }

      .bottom-dialog.show {
        transform: translateY(0);
      }

      .bottom-dialog-title {
        color: #0f4c81;
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 20px;
        text-align: center;
      }

      .select-field {
        position: relative;
        margin-bottom: 20px;
      }

      .select-display {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        border: 1px solid #eaeaea;
        border-radius: 16px;
        background-color: white;
        font-size: 18px;
        color: #666;
        cursor: pointer;
      }

      .select-display .icon {
        color: #333;
        font-size: 24px;
      }

      .time-options {
        position: absolute;
        top: calc(100% + 5px);
        left: 0;
        width: 100%;
        background: white;
        border-radius: 16px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        display: none;
        z-index: 10;
      }

      .time-option {
        padding: 15px 20px;
        border-bottom: 1px solid #f5f5f5;
        font-size: 18px;
        text-align: center;
        cursor: pointer;
      }

      .time-option:last-child {
        border-bottom: none;
      }

      .time-option:hover {
        background-color: #f9f9f9;
      }

      .continue-button {
        background-color: #4991ef;
        color: white;
        border: none;
        border-radius: 16px;
        padding: 16px 32px;
        font-size: 18px;
        font-weight: 600;
        width: 100%;
        cursor: pointer;
        margin-top: 20px;
      }

      .continue-button:hover {
        background-color: #3b7fd9;
      }

      /* Testimonial styles */
      .testimonial {
        margin-top: 40px;
        background: white;
        border-radius: 20px;
        padding: 32px 24px;
        width: 100%;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        position: relative;
      }
      .quote-symbol {
        color: #4991ef;
        font-size: 40px;
        line-height: 1;
        text-align: center;
        margin-bottom: 16px;
      }
      .quote-text {
        color: #333;
        font-size: 18px;
        line-height: 1.5;
        text-align: center;
      }
      .app-name {
        color: #4991ef;
        font-weight: 600;
      }
      .user-info {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
      }
      .user-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 10px;
      }
      .user-name {
        color: #0f4c81;
        font-weight: 600;
        font-size: 18px;
      }

      @media (max-width: 480px) {
        .progress-ring {
          width: 180px;
          height: 180px;
        }
        .profile-container {
          width: 140px;
          height: 140px;
        }
        .dialog-title {
          font-size: 24px;
        }
        .loading-details {
          font-size: 18px;
        }
        .option-button {
          padding: 14px 20px;
          font-size: 16px;
          min-width: 100px;
        }
      }

      /* Time dialog styles */
      .select-field-modal {
        position: relative;
        width: 100%;
      }

      .select-display {
        display: flex;
        align-items: center;
        padding: 16px 20px;
        border: 1px solid #eaeaea;
        border-radius: 16px;
        background-color: white;
        font-size: 18px;
        color: #666;
        cursor: pointer;
      }

      .time-icon {
        margin-right: 10px;
        display: flex;
        align-items: center;
      }

      .select-display .icon {
        color: #333;
        font-size: 18px;
        margin-left: auto;
      }

      /* Time options popup styles */
      .time-options-popup {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: white;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
        z-index: 200;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        max-width: 600px;
        margin: 0 auto;
      }

      .time-options-popup.show {
        max-height: 300px;
      }

      .time-options-container {
        max-height: 300px;
        overflow-y: auto;
        padding: 10px 0;
        -webkit-overflow-scrolling: touch;
      }

      .time-option {
        padding: 15px 20px;
        text-align: center;
        font-size: 18px;
        color: #333;
        cursor: pointer;
        border-bottom: 1px solid #f5f5f5;
      }

      .time-option:last-child {
        border-bottom: none;
      }

      .time-option:hover,
      .time-option:active {
        background-color: #f5f8ff;
        color: #4991ef;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- Progress circle with profile image -->
      <div class="progress-container">
        <div class="progress-ring">
          <svg class="progress-circle" width="200" height="200" viewBox="0 0 200 200">
            <circle class="progress-circle-bg" cx="100" cy="100" r="90" fill="none" />
            <circle
              class="progress-circle-value"
              cx="100"
              cy="100"
              r="90"
              fill="none"
              stroke-dasharray="565.48"
              stroke-dashoffset="226.19"
            />
          </svg>
          <div class="profile-container">
            <img
              src="./imgs/ai-tutor-head.png"
              alt="Profile"
              class="profile-image"
            />
          </div>
          <div class="progress-text">%60</div>
        </div>
      </div>

      <!-- Main title -->
      <h1 class="title">Creating your personal experience...</h1>

      <!-- Completed Steps -->
      <div class="loading-section">
        <div class="loading-item">
          <div class="loading-icon">✨</div>
          <div class="loading-details">Creating diverse topics</div>
          <div class="completed-status">
            Done
            <div class="check-icon">✓</div>
          </div>
        </div>

        <div class="loading-item">
          <div class="loading-icon">💬</div>
          <div class="loading-details">Preparing interactive dialogues</div>
          <div class="completed-status">
            Done
            <div class="check-icon">✓</div>
          </div>
        </div>

        <div class="loading-item">
          <div class="loading-icon">👩‍🏫</div>
          <div class="loading-details">Optimizing your learning path</div>
          <div class="completed-status">
            Done
            <div class="check-icon">✓</div>
          </div>
        </div>

        <div class="loading-item">
          <div class="loading-icon">🏁</div>
          <div class="loading-details">Finalizing your plan</div>
          <div class="completed-status">
            Done
            <div class="check-icon">✓</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal Overlay with Dialog -->
    <div class="overlay" id="goalDialog">
      <div class="dialog-section">
        <div class="dialog-header">
          <div class="dialog-subtitle">TO MAKE PROGRESS, PLEASE CLARIFY</div>
          <div class="dialog-title">What is your daily practice goal?</div>
        </div>
        <div class="option-buttons">
          <div class="option-button" data-value="5">5 min/day</div>
          <div class="option-button" data-value="10">10 min/day</div>
          <div class="option-button" data-value="15">15 min/day</div>
        </div>
      </div>
    </div>

    <!-- Time Selection Dialog -->
    <div class="overlay" id="timeDialog" style="display: none">
      <div class="dialog-section">
        <div class="dialog-header">
          <div class="dialog-subtitle">TO MAKE PROGRESS, PLEASE CLARIFY</div>
          <div class="dialog-title">When would you like to start your daily practice?</div>
        </div>
        <div class="select-container" style="padding: 0 20px 30px">
          <div class="select-field-modal">
            <div class="select-display" id="timeSelect">
              <div class="time-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
                    stroke="#666666"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                  <path
                    d="M12 6V12L16 14"
                    stroke="#666666"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
              </div>
              <span>Choose start time</span>
              <span class="icon">▼</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Time Options Popup -->
    <div class="time-options-popup" id="timeOptionsPopup">
      <div class="time-options-container">
        <div class="time-option">19:30</div>
        <div class="time-option">20:00</div>
        <div class="time-option">20:30</div>
        <div class="time-option">21:00</div>
        <div class="time-option">21:30</div>
        <div class="time-option">22:00</div>
        <div class="time-option">22:30</div>
        <div class="time-option">23:00</div>
        <div class="time-option">23:30</div>
        <div class="time-option">00:00</div>
        <div class="time-option">00:30</div>
        <div class="time-option">01:00</div>
        <div class="time-option">01:30</div>
        <div class="time-option">02:00</div>
        <div class="time-option">02:30</div>
        <div class="time-option">03:00</div>
        <div class="time-option">03:30</div>
        <div class="time-option">04:00</div>
        <div class="time-option">04:30</div>
        <div class="time-option">05:00</div>
        <div class="time-option">05:30</div>
        <div class="time-option">06:00</div>
        <div class="time-option">06:30</div>
        <div class="time-option">07:00</div>
      </div>
    </div>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        // Elements
        const progressCircle = document.querySelector('.progress-circle-value')
        const progressText = document.querySelector('.progress-text')
        const goalDialog = document.getElementById('goalDialog')
        const timeDialog = document.getElementById('timeDialog')
        const timeSelect = document.getElementById('timeSelect')
        const timeOptionsPopup = document.getElementById('timeOptionsPopup')
        const timeOptionItems = document.querySelectorAll('.time-option')
        const optionButtons = document.querySelectorAll('.option-button')

        // Progress animation constants
        const circumference = 565.48
        const startProgress = 60
        const endProgress = 100
        const animationDuration = 3000 // 3 seconds

        // Set initial progress
        setProgress(startProgress)

        // Selected values
        let selectedGoal = null
        let selectedTime = null

        // Function to set progress circle and text
        function setProgress(percent) {
          const offset = circumference - (percent / 100) * circumference
          progressCircle.style.strokeDashoffset = offset
          progressText.textContent = `%${Math.round(percent)}`
        }

        // Toggle time options display
        timeSelect.addEventListener('click', function () {
          timeOptionsPopup.classList.add('show')
        })

        // Handle time option selection
        timeOptionItems.forEach(option => {
          option.addEventListener('click', function () {
            selectedTime = this.textContent
            timeSelect.querySelector('span:nth-child(2)').textContent = selectedTime
            timeOptionsPopup.classList.remove('show')

            // 获取页面标题
            const pageTitle = document.querySelector('.title')
              ? document.querySelector('.title').textContent.trim()
              : 'Creating your personal experience...'

            const pageName = window.location.pathname.split('/').pop().split('.')[0]

            // 创建数据对象
            const data = {
              title: pageTitle,
              goal: selectedGoal,
              time: selectedTime,
              value: `Goal: ${selectedGoal} min/day, Practice time: ${selectedTime}`,
            }

            // 以JSON格式存储到localStorage
            localStorage.setItem(pageName, JSON.stringify(data))

            // 保留原有存储方式，以保证兼容性
            localStorage.setItem('selectedGoal', selectedGoal)
            localStorage.setItem('selectedTime', selectedTime)

            // Start progress animation after selection
            setTimeout(() => {
              timeDialog.style.display = 'none'
              animateProgress()
            }, 500)
          })
        })

        // Handle goal option selection
        optionButtons.forEach(button => {
          button.addEventListener('click', function () {
            selectedGoal = this.getAttribute('data-value')
            goalDialog.style.display = 'none'
            timeDialog.style.display = 'flex'
          })
        })

        // Close options when clicking outside
        document.addEventListener('click', function (event) {
          if (!timeSelect.contains(event.target) && !timeOptionsPopup.contains(event.target)) {
            timeOptionsPopup.classList.remove('show')
          }
        })

        // Function to animate progress from 60% to 100%
        function animateProgress() {
          const startTime = performance.now()

          function updateProgress(currentTime) {
            const elapsedTime = currentTime - startTime
            const progress = Math.min(elapsedTime / animationDuration, 1)
            const currentProgress = startProgress + (endProgress - startProgress) * progress

            setProgress(currentProgress)

            if (progress < 1) {
              requestAnimationFrame(updateProgress)
            } else {
              // Navigate to achieveYour.html when animation completes
              window.location.href = 'achieveYour.html'
            }
          }

          requestAnimationFrame(updateProgress)
        }
      })
    </script>
  </body>
</html>
